<template>
    <div class="customer-container">
        <van-sticky>
            <div class="list-header-box">
                <div class="list-tab-box">
                    <div class="list-tab">
                        <div
                            v-for="item in tabArr"
                            :key="item.value"
                            @click="chooseTab(item.value)"
                            :class="['tab', currentTab == item.value ? 'active':'']">
                            {{item.label}}
                        </div>
                    </div>
                    <filter-popup
                        ref="filterPopup"
                        :tab="currentTab"
                        @submit="onFilter">
                    </filter-popup>
                </div>
            </div>
        </van-sticky>
        <div class="customer-list">
            <wp-null-data-area
                :null-data-msg="$st('wp-zan-wu-shu-ju')"
                v-if=" (!tableData) || (tableData.length === 0)" />
            <van-list
                ref="list"
                v-model:loading="loading"
                :finished="finished"
                @load="onLoad"
                :immediate-check="false" >
                <customer-card
                    v-for="(item, index) in tableData"
                    :key="index"
                    :item="item"
                    class="customer-card"
                    @click="toPage('/customerDetail', { customer_id: item.customer_id} )"
                >
                </customer-card>
            </van-list>
        </div>
        <div
            @click="toPage('/newCustomer', { type: 'new' })"
            class="fix-add-icon">
            <img src="@/assets/add-customer.png">
        </div>
    </div>
</template>
<script>
import { reactive, toRefs, onMounted, ref } from 'vue';
import CustomerCard from '@/components/workbench/maintaincheckcustomer/common/customerCard.vue';
import useCustomerManageSetup from '@/setup/workbench/CustomerManageSetup.js';
import FilterPopup from './common/filterPopup.vue';
import Cookies from 'js-cookie';
import { useRouter } from 'vue-router';
import { selfI18n } from '@/i18n/index';

export default {
    components: {
        CustomerCard,
        FilterPopup
    },
    setup (props, ctx) {
        const $st = selfI18n;
        const filterPopup = ref(null);
        const { getCustomerList } = useCustomerManageSetup();

        const router = useRouter();

        const state = reactive({
            tabArr: [{
                label: $st('wp-quan-bu'),
                value: 'all'
            }, {
                label: $st('wp-wo-de-ke-hu'),
                value: 'my'
            }],
            currentTab: 'all',
            tableData: [],
            refreshing: false,
            loading: false,
            finished: false,
            defaultfilterdata: {
                seller_account: '',
                page: 1,
                n: 20
            },
            total: 0,
            sellerObj: {
                all: '',
                my: Cookies.get('username') || ''
            },
            memberList: [],
            filterdata: {
                seller_account: ''
            }
        });

        const onLoad = () => {
            state.defaultfilterdata.page++;
            getList();
        };

        const chooseTab = (value) => {
            filterPopup.value.onClose();
            filterPopup.value.resetForm();
            state.currentTab = value;
            state.defaultfilterdata.seller_account = state.sellerObj[value];
            state.filterdata = {
                seller_account: ''
            };
            state.defaultfilterdata.page = 1;
            state.tableData = [];
            getList();
        };

        const getList = () => {
            const param = {
                ...state.defaultfilterdata,
                ...state.filterdata
            };
            param.seller_account = state.currentTab === 'all' ? state.filterdata.seller_account : state.defaultfilterdata.seller_account;
            delete param.createstarttime;
            delete param.createendtime;
            delete param.regiontext;
            delete param.seller_label;
            getCustomerList(param).then((data) => {
                state.total = data.allnum;
                state.loading = false;
                if (state.defaultfilterdata.page * state.defaultfilterdata.n >= state.total) {
                    state.finished = true;
                }
                const dataValue = data.value || [];
                state.tableData = state.tableData.concat(dataValue);
            });
        };

        const toPage = (path, query, params) => {
            router.push({
                path: path,
                query: query
            });
        };

        const onFilter = (data) => {
            state.filterdata = {
                ...data
            };
            state.defaultfilterdata.page = 1;
            state.tableData = [];
            getList();
        };

        onMounted(() => {
            getList();
        });

        return {
            ...toRefs(state),
            onLoad,
            chooseTab,
            toPage,
            filterPopup,
            onFilter
        };
    }
};
</script>
<style lang="scss">
.customer-container .list-tab-box .van-overlay {
    top: 60px;
}
</style>
<style scoped lang="scss">
.customer-container {
    overflow: hidden;
    background-attachment: fixed;
    background: linear-gradient(
        180deg,
        #3875c6,
        rgba(56, 117, 198, 0) 70%,
        rgba(56, 117, 198, 0) 100%);
    .list-header-box {
        padding: 16px 15px 15px;
        .list-tab-box {
            display: flex;
            justify-content: space-between;
            .list-tab {
                display: flex;
                font-size: 15px;
                align-items: baseline;
                color: #fff;
                .tab {
                    &:first-of-type {
                        margin-right: 15px;
                    }
                }
                .active {
                    font-size: 18px;
                    border-bottom: 3px #61cfbe solid;
                    padding-bottom: 2px;
                }
            }
            .list-search {
                font-size: 14px;
                align-self: flex-end;
                padding-bottom: 6px;
            }
        }
    }
    .customer-list {
        padding: 0 15px;
        z-index: -1;
        height: calc(100vh - 60px);
        overflow-y: auto;
        .customer-card {
            margin-bottom: 15px;
        }
    }
    .fix-add-icon {
        position: fixed;
        bottom: 88px;
        right: 26px;
        img {
            width: 56px;
            height: 60px;
        }
    }
}
</style>
